<template>
    <div class="main_div">
        <div class="content_div">

            <div class="theme" v-for="item, i in themes">

                <div class="theme_title">{{ item.name }}</div>

                <div v-for="list_item, j in item.layers"
                    :class="{ 'list-item': true, 'list_item_selected': selected_id == (i + '-' + j) }"
                    @click.stop="onclick(i + '-' + j)">{{ list_item.name }}</div>

            </div>

        </div>
    </div>
</template>

<script setup lang="js" name="Comp_Theme">
import { onMounted, markRaw,inject, ref, getCurrentInstance } from 'vue';
let internalInstance = getCurrentInstance();

const themes = markRaw(inject("config").theme);

let selected_id = ref("");

const onclick = (n) => {

    selected_id.value = n;
    internalInstance.appContext.config.globalProperties.global_vars.theme.selected_id = selected_id.value;
}

onMounted(() => {
    selected_id.value = internalInstance.appContext.config.globalProperties.global_vars.theme.selected_id;
});


</script>

<style scoped lang="less">
@import "../assets/css/subview.less";

.main_div {
    width: 100%;
    height: 100%;
    border: 1px solid #333;
}


.theme {
    width: 100%;
    background-color: rgba(90, 185, 230, 0.603);
    border: 1px solid rgb(7, 188, 212);
    border-radius: 3px;
    padding: 7px 7px 7px 7px;
    box-sizing: border-box;
    margin-top: 5px;

    .theme_title {
        height: 26px;
        color: rgb(180, 255, 137);
        font-weight: bold;
        font-size: 14px;
        text-shadow: 1px 1px 3px #333;
    }
}

.list-item {
    width: 100%;
    background-color: rgba(90, 185, 230, 0.603);
    border: 1px solid rgb(7, 188, 212);
    border-radius: 3px;
    padding: 7px 7px 7px 7px;
    box-sizing: border-box;
    margin-top: 5px;
    cursor: pointer;
}

.list-item:hover {
    background-color: #0c7ac4;
}

.list_item_selected {
    background-color: #01337e !important;
}
</style>